<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
</head>
<style>
    div {
        background-color: cadetblue;
        font-size: 50px; /*字体大小*/
        font-family: "Algerian", "Arial Black", serif; /*字体家族，第一个字体能用就使用,否则从左往右一次读取. serif表示的是衬线字体(sans-serif表示非衬线字体)*/
        font-style: italic; /*字体风格  normal-默认 italic-斜体 oblique-斜体(强制斜体) */
        font-weight: bold; /*字体粗细 lighter-细的 normal-正常的  bold-粗的.  font-weight=数字,也行(没单位) <300==lighter、300<数字<600==正常的、600<数字<900==粗的*/
        color: deepskyblue; /*字体颜色  有三种表示方式： 英文-red、RGB-rgb(255,255,255)、16进制-#ffffff*/
        letter-spacing: 20px; /*文本间距 */
        word-spacing: 50px; /*单词间距 */
        text-indent: 2em; /*文本缩进 */
        text-decoration: darkviolet line-through wavy; /*文本修饰(下划线)text-decoration:(颜色 线条 状态)  overline-上划线、underline-下划线、line-through-横穿文本.  wavy-波浪线、dotted-虚线、solid-实线*/
        text-align: left; /*文本对其 */
        line-height: 1.5; /*行高  1.5==字体大小*150%*/
    /*(vertical-align: top; 为了好看放这里，实际无效，因为用于指定同一行元素之间而且不能控制块元素)*/
        vertical-align: top; /*文本垂直方向对齐方式 vertical-align不能控制块元素 (用于指定同一行元素之间，或表格单元格内的文字垂直对齐方式. baseline-父元素基线对齐、top-顶部对齐、middle-中部与父元素基线对齐、bottom-底部对齐)*/
    }

    div > span {
        font-size: 15px;
        color: yellowgreen;
        vertical-align: top; /*文本垂直方向对齐方式 vertical-align不能控制块元素 (用于指定同一行元素之间，或表格单元格内的文字垂直对齐方式. baseline-父元素基线对齐、top-顶部对齐、middle-中部与父元素基线对齐、bottom-底部对齐)*/
    }

    div:nth-of-type(3) {
        color: rgb(200, 200, 200); /*也可写成rgb(100%,100%,100%)*/
        text-decoration: pink underline wavy;
    }

    div:nth-of-type(4) {
        color: rgba(200, 200, 255, 0.5); /*（a表示透明度）也可写成rgb(100%,100%,100%,100%)*/
    }

    div:nth-of-type(5) {
        color: hsl(20, 50%, 50%); /*hsl(20,100%,100%)*/
    }

    div:nth-of-type(6) {
        color: hsla(50, 50%, 50%, 0.5); /*hsla(50,100%,100%,0.5)*/
    }

    /*复合属性  字体族必须是最后一位、字体大小必须是倒数第二位*/
    /*div{*/
    /*    font: bold italic 100px "STHupo","华文楷体","华文隶书",sans-serif;*/
    /*}*/
</style>
<body>
<div>hello 小黄123</div>
<hr>
<div>hello 小黄234</div>
<hr>
<div>hello 小黄345</div>
<hr>
<div>hello 小黄456</div>
<hr>
<div>hello 小黄567</div>
<hr>
<div>hello 小黄678</div>
<hr>
<div>hello 小黄789</div>
<hr>
<div>no_hello!<span>hello 小黄012</span></div>
</body>
</html>